<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/member.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/swiper.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>
<body>

<section class="member_section bg-f5">
    <div class="match_box flex_center" id="match_bg" style="background: url() center no-repeat ;background-size:cover; ">
        <div id="header" style="background: transparent; position: absolute; left: 0; top: 0; width: 100%; z-index: 99;">
            <header class="member_header ">
                <div class="header-left">
                    <div tapmode onclick="comeBack();" class="nav-left">
                        <img class="icon-back" src="../../icon/icon-back-white.png"/>
                    </div>
                </div>
                <div class="header-right">
                    <div class="nav-right">
                        <div class="remind" style="display: none;" id="remind" tapmode onclick="remind(this);">
                            <img class="icon-bell bell-off" src="../../icon/icon-bell.png"/>
                            <img class="icon-bell bell-on" src="../../icon/icon-bell-on.png"/>
                        </div>
                    </div>
                </div>
            </header>
        </div>

        <img id="match_icon" src="../../icon/Icon.png" class="match_tx mr30"/>
        <div class="match_header_detail c-fff ml30" style="width: 3.8rem;">
            <div class="f30" id="match_name">全国高校篮球大赛</div>
            <div class="f26"><span class="mr25" id="match_time">17:00</span><span style="display: inline;"
                                                                                  id="match_address">篮球比赛即根据篮球运动进行的比赛</span>
            </div>
            <div class="match_tips1 being mt10" id="match_status" tapmode onclick="toUrlvideo()"><i
                    class="icon-live mr10"></i><em id="match_status_text">直播中</em></div>
        </div>
        <div class="match_view">
            <div class="match_video zy_media">
                <!--<video id="video" poster="../../image/banner01.png">
                    <source src="../../icon/20190508110623.mp4" type="video/mp4" />
                </video>-->
            </div>
            <span class="video_close">关闭</span>
        </div>

    </div>
    <ul class="userType_list3 bg-fff" style="padding:0 0.7rem;">
        <li tapmode class="on">简介</li>
        <li tapmode>团队</li>
        <li tapmode>报道</li>
    </ul>
    <div class="bg-fff ">
        <div class="page_box on">
            <div class="article pl30 pr30 pt30" id="content"></div>
        </div>

        <div class="page_box ">
            <div class="gt_box">
                <ul class="gt_left" id="prize">
                    <!--<li class="on">一等奖</li>
                    <li>二等奖</li>
                    <li>三等奖</li>-->
                </ul>
                <ul class="gt_team" id="teamList">
                    <!--<li>
                        <div class="team_box">
                            <img class="team_img" src="../../image/school-icon.png"/>
                            <div class="team_details single-ellipsis f22 c-666">猛虎篮球队</div>
                        </div>
                        <img class="arr_move" src='../../icon/move.png'/>
                    </li>-->
                </ul>
            </div>
        </div>

        <div class="page_box">
            <div class="match-outs" style="border-bottom: none; padding-top: 0;">
                <ul id="warHtml">
                    <!--<li>
                        <div class="outs-detail" tapmode onclick="commonUrl('match_detail')">
                            <div class="outs-img bg-cover"
                                 style="background: url('../../image/img-activity.png');"></div>
                            <div class="outs-info">
                                <p class="multiline-ellipsis_3 info">篮球比赛即根据篮球运动进行的比赛。篮球比赛的形式多种多样，有较为常见的五人篮球。</p>
                                <div class="flex-div">
                                    <p>15分钟前</p>
                                    <span>25468评论</span>
                                </div>
                            </div>
                        </div>
                    </li>-->
                </ul>
            </div>
        </div>
    </div>

</section>

</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/zy.media.min.css"/>
<script type="text/javascript" src="../../script/zy.media.min.js"></script>
<script type="text/javascript">
    var match_id = '';//比赛id
    var type = 1;//类型：1 比赛简介 2获奖队伍 3赛后战报
    var live_status = '';//直播状态
    var live_url = '';//直播链接
    var prize_id = '';
    apiready = function () {

        $api.fixStatusBar($api.dom('#header'));
        api.setStatusBarStyle({
            style: 'light', //设置APP状态栏字体色
            color: 'rgba(255,255,255,0)', //设置APP状态栏背景色
        });
        //setFixStatusBar(); //设置状态栏
        pop.loading();
        keybackListener()
        match_id = api.pageParam.match_id;
        // match_id = 3;

        getMatchDetails();

        getMatchData();
    };
    var videoUrl = '';
    var videoHtml = '';

    var playStatus = 0;

    //获取比赛信息
    function getMatchDetails() {
        var param = {
            token: $api.getStorage('token'),
            match_id: match_id,//比赛id
        }
        getAjax(Interface.match_details, param, function (res) {
            console.log(jsonChange(res));
            var data = res.data;
            if (isDefine(data)) {

                //比赛信息
                $("#match_time").html(data.start_date);
                $("#match_address").html(data.address);
                $("#match_name").html(data.title);
                //比赛状态
                live_status = data.status;
                if(isDefine(data.url)){
                    live_url = data.url;

                }

                if(isDefine(data.void_ids)){
                    videoUrl = ajaxUrl + data.void_ids;
                    videoHtml = '<video id="video" poster="../../image/banner01.png">' +
                        '                <source src="'+ ajaxUrl + data.void_ids+'" type="video/mp4" />' +
                        '            </video>'
                    $('.match_video').html(videoHtml);
                    doZyMediaJs(1)
                }



                if (data.status == 1) {
                    playStatus = 1;
                    $("#match_status").removeClass('being').addClass('end');
                    $("#match_status_text").html('未开始');
                    $("#remind").show();
                    if (data.remind_status == 1) {
                        $("#remind").addClass('on');
                    } else{
                        $("#remind").removeClass('on');
                    }

                } else if (data.status == 2) {
                    playStatus = 1;
                    $("#match_status").removeClass('end').addClass('being');
                    $("#match_status_text").html('进行中');
                    $("#match_status").find(".icon-live").hide();

                    $("#remind").remove()

                } else if (data.status == 3) {

                    playStatus = 1;//1 无视频无链接，2有视频有链接，3无视频有链接，4有视频无链接
                    $("#match_status").removeClass('being').addClass('end');
                    $("#match_status_text").html('已结束');
                    $("#match_status").find(".icon-live").hide();

                    $("#remind").remove()

                } else if (data.status == 4) {

                    playStatus = 2;
                    $("#match_status").removeClass('end').addClass('being');
                    $("#match_status_text").html('直播中');

                    if(isDefine(data.void_ids) && !isDefine(data.url)){
                        playStatus = 4;
                        $("#match_status").removeClass('end').addClass('being');
                        $("#match_status_text").html('进行中');
                    }else if(!isDefine(data.void_ids) && isDefine(data.url)){
                        playStatus = 3;
                        $("#match_status").removeClass('end').addClass('being');
                        $("#match_status_text").html('直播中');
                    }

                    $("#remind").remove()

                } else if (data.status == 5) {
                    playStatus = 2;
                    $("#match_status").removeClass('end').addClass('being');
                    $("#match_status_text").html('视频回放');

                    if(isDefine(data.void_ids) && !isDefine(data.url)){
                        playStatus = 4;
                    }else if(!isDefine(data.void_ids) && isDefine(data.url)){
                        playStatus = 3;
                    }

                    $("#remind").remove()
                }



                if(isDefine(data.background_path)){
                    $("#match_bg").attr('style','background: url('+ ajaxUrl + data.background_path+') center no-repeat ;background-size:cover;');
                }else {
                    $("#match_bg").attr('style','background: url(../../image/bg-match-logo.png) center no-repeat ;background-size:cover;');
                }
                $("#match_icon").attr('src', ajaxUrl + data.icon_path);

            }

            pop.close();
        }, function (error) {
            pop.notice(error.msg);
            pop.close();
        })
    }




    //获取比赛数据
    function getMatchData() {

        var param = {
            token: $api.getStorage('token'),
            match_id: match_id,//比赛id
            type: type,//类型：1简介 2获取队伍 3赛后战报
        }
        pop.loading();
        getAjax(Interface.get_prize_lower, param, function (res) {

            var data = res.data;

            if (isDefine(data)) {
                if (type == 1) {

                    $("#content").html(data.content)

                    $("#content a").each(function () {
                        var _this = $(this);
                        _this.css({
                            position: 'relative',
                            zIndex: '99'
                        })
                        var url = _this.attr('href');
                        console.log(url)
                        _this.attr('href','javascript:void(0);');
                        _this.attr('onclick',"toUrl('"+url+"')");
                    })



                } else if (type == 2) {

                    var prizeHtml = '';
                    $.each(data, function (i, item) {
                        if (i == 0) {
                            prizeHtml += '<li tapmode class="on" data-id="' + item.id + '">' + item.title + '</li>'
                            prize_id = item.id;
                            getPrizeData()
                        } else {
                            prizeHtml += '<li tapmode  data-id="' + item.id + '">' + item.title + '</li>'
                        }

                    })
                    $("#prize").html(prizeHtml)


                } else if (type == 3) {

                    var warHtml = '';

                    $.each(data, function (i, item) {
                        var war_id = {"war_id": item.id}
                        warHtml = '<li><div class="outs-detail" tapmode onclick=\'commonUrl("match_detail",' + jsonChange(war_id) + ')\'>' +
                            '                    <div class="outs-img bg-cover" style="background: url(' + ajaxUrl + item.icons_path + ');"></div>' +
                            '                    <div class="outs-info">' +
                            '                        <p class="multiline-ellipsis_3 info">' + item.title + '</p>' +
                            '                        <div class="flex-div">' +
                            '                            <p>' + item.date + '</p>' +
                            '                            <span>' + item.comment_number + '评论</span>' +
                            '                        </div>' +
                            '                    </div>' +
                            '                </div></li>';
                    })

                    $("#warHtml").html(warHtml)
                }


            } else {

                if (type == 1){

                    $("#content").html(noData)

                }else if(type == 3){

                    $("#warHtml").html(noData)

                }else if(type == 2){

                    $(".gt_box").html(noData)

                }

            }

            pop.close();
        }, function (error) {
            pop.notice(error.msg);
            pop.close();
        })
    }

    //获取获奖队伍
    function getPrizeData() {

        var param = {
            token: $api.getStorage('token'),
            match_id: match_id,//比赛id
            type: 2,//类型：1简介 2获取队伍 3赛后战报
            prize_id: prize_id,//当type为2的时候可带，奖品id,根据奖品id获取获奖队伍
        }
        pop.loading();
        getAjax(Interface.get_prize_lower, param, function (res) {

            var data = res.data;

            if (isDefine(data)) {
                var teamList = '';

                $.each(data, function (i, item) {
                    var teamP = {"team_id": item.id}
                    teamList += '<li tapmode onclick=\'commonUrl("team_detail",'+jsonChange(teamP)+')\'>' +
                        '                        <div class="team_box">' +
                        '                            <img class="team_img" src="'+ajaxUrl+item.icon_path+'"/>' +
                        '                            <div class="team_details single-ellipsis f22 c-666">'+item.title+'</div>' +
                        '                        </div>' +
                        '                        <img class="arr_move" src=\'../../icon/move.png\'/>' +
                        '                    </li>'
                })


                $("#teamList").html(teamList)

            } else {
                $("#teamList").html(noData)
            }

            pop.close();
        }, function (error) {
            $("#teamList").html(noData)

            pop.notice(error.msg);
            pop.close();
        })
    }


    //开启关闭赛事提醒
    function remind(that){
        event.stopPropagation();
        if($(that).hasClass('on')){
            $(that).removeClass('on');
            addRemind(2,match_id)
        }else {
            $(that).addClass('on');
            addRemind(1,match_id)
        }

    }

    //关注赛事提醒
    function addRemind(type){
        var param = {
            token: $api.getStorage('token'),
            match_id: match_id,
            type: type,
        }
        getAjax(Interface.set_remind,param,function (res) {
            if(type == 1){
                pop.notice('已开启提醒')
            }else {
                pop.notice('已关闭提醒')
            }
            api.sendEvent({
                name: 'remind',
            });
        },function (error) {
            pop.notice(error.msg)
        })
    }

    //直播链接
    function toUrlvideo() {
        //playStatus = 1 无视频无链接，2有视频有链接，3无视频有链接，4有视频无链接
        if(playStatus == 1){
            return;
        }else if(playStatus == 2){
            api.actionSheet({
                title: '选择观看方式',
                cancelTitle: '取消',
                buttons: ['跳转链接观看', '观看视频']
            }, function (ret, err) {
                if (ret) {
                    if (ret.buttonIndex == 1) {
                        console.log(live_url)

                        if (isDefine(live_url)) {
                            openURLInApp(live_url)
                        } else {
                            pop.notice('暂无直播')
                        }
                    } else if (ret.buttonIndex == 2) {

                        if(isDefine(videoUrl)){
                            if(api.systemType == 'ios'){
                                play(videoUrl)
                            }else {
                                $(".match_view").show().css({
                                    zIndex: 100
                                }).find('.match_video').html(videoHtml)
                                doZyMediaJs(1)
                            }
                        }else {
                            pop.notice('暂无视频')
                        }

                    }
                }
            });
        }else if(playStatus == 3){
            api.actionSheet({
                title: '选择观看方式',
                cancelTitle: '取消',
                buttons: ['跳转链接观看']
            }, function (ret, err) {
                if (ret) {
                    if (ret.buttonIndex == 1) {
                        console.log(live_url)

                        if (isDefine(live_url)) {
                            openURLInApp(live_url)
                        } else {
                            pop.notice('暂无直播')
                        }
                    }
                }
            });

        }else if(playStatus == 4){
            api.actionSheet({
                title: '选择观看方式',
                cancelTitle: '取消',
                buttons: ['观看视频']
            }, function (ret, err) {
                if (ret) {
                    if (ret.buttonIndex == 1) {
                        if(isDefine(videoUrl)){
                            if(api.systemType == 'ios'){
                                play(videoUrl)
                            }else {
                                $(".match_view").show().css({
                                    zIndex: 100
                                }).find('.match_video').html(videoHtml)
                                doZyMediaJs(1)
                            }
                        }else {
                            pop.notice('暂无视频')
                        }
                    }
                }
            });
        }

    }

    $(".match_view").on('click','.video_close',function () {
        $(".match_view").hide().css({
            zIndex: 98
        }).find('.match_video').html('')
    });

    //切换奖项
    $(".gt_left").on('click', 'li', function () {
        var _this = $(this);
        _this.addClass('on').siblings('li').removeClass('on');
        prize_id = _this.attr('data-id');
        getPrizeData();
    });


    //切换tab
    $(".userType_list3 li").click(function () {
        $(".userType_list3 li").removeClass("on");
        $(this).addClass("on");
        $(".page_box").removeClass("on");
        $(".page_box").eq($(this).index()).addClass("on");
        var _index = $(this).index();
        type = parseInt(_index) + 1
        getMatchData()
    })


</script>
